<template>
  <view class="my-card">
    <view class="p-title">
      <view class="title-con">
        <text :class="genderClass">{{ info?.gender }}·{{ info?.year }}年</text>
        <custom-realname :realname="info.realname" page="my"></custom-realname>
      </view>
      <icon-card :info="info" icon-type="wx"></icon-card>
    </view>

    <desc-card :info="info"></desc-card>

    <!-- 照片 -->
    <view style="padding-top: 24rpx">
      <custom-picture :imgList="imgList"></custom-picture>
    </view>

    <!-- 家长 -->
    <parent-card :info="info"></parent-card>

    <more-card mtype="my"></more-card>
    <view class="lock-con" v-if="info.status == 1">
      <view class="lock-title">已暂停相亲</view>
      <view class="lock-text">开启相亲后，将继续推荐优质嘉宾</view>
      <custom-btn class="lock-btn" @click="openBtn">开启相亲</custom-btn>
    </view>
  </view>
</template>

<script setup>
import IconCard from "@/components/person/icon-card.vue";
import DescCard from "@/components/person/desc-card.vue";
import ParentCard from "@/components/person/parent-card.vue";
import MoreCard from "@/components/common/more-card.vue";

import useStore from "@/store";
const { common } = useStore();

const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
  imgList: {
    type: Array,
    default: () => [],
  },
});

// 性别
const genderClass = computed(() => {
  const cObj = {
    男: "boy-text",
    女: "girl-text",
  };
  return cObj[props.info.gender];
});

const openBtn = () => {
  common.updateSubmitParams(false);
  common.updatePopupOpen(true, "submit");
};
</script>

<style lang="scss" scoped>
.my-card {
  background: #fff;
  border-radius: 30rpx;
  margin: 20rpx;
  padding: 40rpx 30rpx;
  position: relative;
  .p-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 52rpx;
    font-weight: bold;
    .title-con {
      flex: 1;
    }
  }
}

.lock-con {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 30rpx;
  .lock-title {
    font-size: 44rpx;
  }
  .lock-text {
    font-size: 36rpx;
    padding: 20rpx 0 40rpx;
  }
  .lock-btn {
    width: 400rpx;
    height: 120rpx;
    line-height: 120rpx;
    color: #fff;
    font-weight: bold;
    font-size: 40rpx;
    background: #f65952;
    border-radius: 120rpx 120rpx 120rpx 120rpx;
  }
}
</style>
